<template>
  <div>
    <SearchTable
      ref="st"
      :needSearchFirstShow="true"
      :formItems="formItems"
      :columns="columns"
      :api="list"
      :scroll="{ x: true }"
    >
      <template #actions>
        <a-button type="primary" @click="toCreate">新增</a-button>
      </template>
      <template #action="{ text, record }">
        <a @click="toDetail(record)">查看</a>
        <a-divider type="vertical" />
        <a @click="toEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="是否进行此次操作？" @confirm="confirm(record, record.status?0:1)">
          <a>{{record.status?'下架':'上架'}}</a>
        </a-popconfirm>
      </template>
    </SearchTable>
  </div>
</template>

<script>
  import { ref, toRefs, reactive } from 'vue';
  import { formItems, columns } from './config';
  import { list, editstatus } from './api';
  import { useRouter } from 'vue-router';

  export default {
    data() {
      return {
        list,
        formItems,
        columns,
      };
    },

    setup(props, context) {
      const st = ref({});
      const router = useRouter();
      function toCreate(query) {
        router.push({
          name: 'pluginaddimage',
        });
      }

      function toEdit(record) {
        const {type} = record;
        router.push({
          name: `pluginedit${type}`,
          query: {
            id: record.id,
          },
        });
      }
      function toDetail(record) {
        const {type} = record;
        router.push({
          name: `plugindetail${type}`,
          query: {
            id: record.id,
          },
        });
      }

      const confirm = ({id}, status) => {
        const params = {
          id,
          status
        }
        editstatus(params).then(res => {
          st.value.load();
        })
      }
      return {
        confirm,
        st,
        toCreate,
        toEdit,
        toDetail
      };
    },
  };
</script>
